<template>
  <div>
    <TopBar>绑定支付宝</TopBar>
    <section class="bindAlipayContainer"  style="margin-top:1.5rem">
      <input type="text" v-model="name" class="defaultInput" placeholder="姓名">
      <input type="text" v-model="personalID" class="defaultInput" placeholder="身份证">
      <input type="text" v-model="alipay" class="defaultInput" placeholder="支付宝账号">
      <input type="text" v-model="nick" class="defaultInput" placeholder="支付宝昵称">
      <div id="bindAlipayBtn" @click="bindAlipay" :style="bg">绑定</div>
    </section>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import { Toast } from 'vux'
import {verify,showMsg,getStore} from '../../../config/mUtils'
import {bindAlipay} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'
let time = null;
export default {
  components:{
    TopBar,
    Toast
  },
  beforeCreate(){
    getSDK()
  },
  data(){
    return {
      name:'',
      personalID:'',
      alipay:'',
      msg:'',
      showPositionValue:false,
      nick:'',//支付宝昵称
    }
  },
  methods:{
    bindAlipay(){
      if(this.name.length == 0){
        showMsg('姓名不能为空',this)
      }else if(this.personalID == ''){
        showMsg('身份证不能为空',this)
      }else if(this.alipay == ''){
        showMsg('支付宝不能为空',this)
      }else if(this.nick == ''){
        showMsg('昵称不能为空',this)
      }
      // else if(!verify(this.name,4)){
      //   showMsg("姓名格式错误",this)
      // }
      else if(!verify(this.personalID,5)){
        showMsg("身份证格式错误",this)
      }else{
        bindAlipay(getStore('loginkey'),this.name,this.personalID,this.alipay,this.nick)//TODO:增加昵称参数
          .then(res=>{
            if(res.status == 1){
              time = setTimeout(()=>{
                this.$router.replace('/cashManager')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  computed:{
    bg(){
      if(this.name.length != 0 && this.personalID.length != 0&&this.alipay.length!=0){
        return 'backgroundColor:#e44c2c'
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .bindAlipayContainer{
    .wh(85%,100%);
    margin: 0 auto;
    .defaultInput{
      .wh(100%,1.4133rem);
      outline: none;
      border: 1px solid #f6f6f6;
      border-left: none;
      border-right: none;
      border-top: none;
      font-size: 0.44rem;
    }
    #bindAlipayBtn{
      .wh(100%,1.1733rem);
      margin-top: 1.0933rem;
      .bg(#dedede);
      .borderRadius(2rem);
      text-align: center;
      line-height: 1.1733rem;
      .sc(0.44rem,#fff);
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
          width: 70% !important;
        }
</style>
